enum ETheme {
  light = "-light",
  dark = "-dark",
}
const theme = ref<ETheme>(ETheme.light);
const body = ref<HTMLBodyElement>();
const isLightTheme = ref<boolean>(true);
const isThemeLight = readonly(isLightTheme);
// if (process.client) {
//   setTimeout(() => {
//     console.log("执行");
//     theme.value = (localStorage.getItem("theme") as ETheme) ?? ETheme.light;
//     body.value = document.getElementsByTagName("body")[0];
//     body.value.classList.add(theme.value);
//     isLightTheme.value = theme.value === ETheme.light;
//   }, 100);
// }

function initTheme() {
  theme.value = (localStorage.getItem("theme") as ETheme) ?? ETheme.light;
  body.value = document.getElementsByTagName("body")[0];
  body.value.classList.add(theme.value);
  isLightTheme.value = theme.value === ETheme.light;
}

function toggleTheme() {
  theme.value = theme.value === ETheme.light ? ETheme.dark : ETheme.light;
  localStorage.setItem("theme", theme.value);
  isLightTheme.value = theme.value === ETheme.light;
  body.value!.classList.toggle(ETheme.light);
  body.value!.classList.toggle(ETheme.dark);
}

export { isThemeLight, toggleTheme, initTheme };
